<template>
    <div class="example2-wrapper">
        <div class="inner">
            <bk-table style="width: 700px;float:right;margin-right:20px;margin-top:20px"
                :data="tabledata"
                title="订单详情"
                height="250"
                @row-mouse-enter="handleRowMouseEnter"
                @row-mouse-leave="handleRowMouseLeave">
                <bk-table-column label="衣服类型" prop="type"></bk-table-column>
                <bk-table-column label="洗衣模式" prop="Washmethod"></bk-table-column>
                <bk-table-column label="单价(元/件)" prop="price"></bk-table-column>
                <bk-table-column label="数量" prop="num"></bk-table-column>
            </bk-table>
            <div style="margin:20px 30px 20px 20px;float:left">
                <p>订单状态:</p>
                <bk-timeline :list="statusList" style="with:300px"></bk-timeline>
            </div>
            <bk-dialog v-model="ratedialog.custom1.visible"
                width="500"
                @confirm="myconfirm"
                :position="ratedialog.custom1.position"
                title="评分">
                <div style="margin-left:30px">
                    <p>速度:</p>
                    <bk-rate :rate.sync="rates" :edit="true" @score="chooseRate1" :tooltips="tooltipss" :width="25" :height="25"></bk-rate>
                    <p>价格:</p>
                    <bk-rate :rate.sync="ratep" :edit="true" @score="chooseRate2" :tooltips="tooltipsp" :width="25" :height="25"></bk-rate>
                    <p>质量:</p>
                    <bk-rate :rate.sync="rateq" :edit="true" @score="chooseRate3" :tooltips="tooltipsq" :width="25" :height="25"></bk-rate>
                </div>
            </bk-dialog>
            <div style="margin-left:300px;margin-top:20px;float:left" :hidden="rate.isRated === '0'">
                <p>订单评分:</p>
                <p>速度:</p>
                <bk-rate :rate.sync="rate.rates" :edit="false" :tooltips="tooltipss" :width="30" :height="30"></bk-rate>
                <p>价格:</p>
                <bk-rate :rate.sync="rate.ratep" :edit="false" :tooltips="tooltipsp" :width="30" :height="30"></bk-rate>
                <p>质量:</p>
                <bk-rate :rate.sync="rate.rateq" :edit="false" :tooltips="tooltipsq" :width="30" :height="30"></bk-rate>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        data () {
            const user = sessionStorage.getItem('user')
            // console.log(user)
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            this.getorderstatus()
            return {
                username: '',
                tabledata: [
                ],
                rate: {},
                statusList: [
                    {
                        tag: '下单成功',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '等待商家上门取衣',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '等待洗衣',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '洗衣完成',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '商家送衣',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '订单完成',
                        content: '',
                        color: 'green',
                        filled: true
                    }
                ],
                ratedialog: { // 评分对话话参数
                    custom1: {
                        visible: false,
                        position: {
                            top: 100
                        }
                    }
                },
                isok: false, // 判断是否评分完毕
                rates: 0, // 速度评分
                ratep: 0, // 价格评分
                rateq: 0, // 质量评分
                tooltipss: [1, 2, 3, 4, 5], // 速度评分的显示
                tooltipsp: [1, 2, 3, 4, 5], // 价格评分的显示
                tooltipsq: [1, 2, 3, 4, 5] // 质量评分的显示
            }
        },
        watch: {
            isok: {
                handler () {
                    if (this.isok === true) {
                        this.rateorder(this.$route.query.id, this.rates, this.ratep, this.rateq)
                        this.isok = false
                    }
                }
            }
        },
        methods: {
            myconfirm () {
                if (this.rates === 0 || this.ratep === 0 || this.rateq === 0) {
                    const a = this.$bkInfo({
                        type: 'error',
                        title: '评分失败，请将三个选项都评分',
                        subTitle: '此窗口3秒后关闭',
                        showFooter: false
                    })
                    let num = 3
                    const t = setInterval(() => {
                        a.subTitle = `此窗口${--num}秒后关闭`
                        if (num === 0) {
                            clearInterval(t)
                            a.close()
                        }
                    }, 1000)
                } else {
                    this.isok = true
                }
            },
            rateorder (orderid, rates, ratep, rateq) {
                // rates速度评分，ratep价格评分，rateq质量评分
                const qs = require('qs')
                this.axios({
                    url: '/rateorder/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        orderid: orderid,
                        rate_speed: rates,
                        rate_price: ratep,
                        rate_quality: rateq
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '评分成功!',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                        this.reload()
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '评分失败，请稍后再试',
                            subTitle: '此窗口3秒后关闭',
                            showFooter: false
                        })
                        let num = 3
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                })
            },
            getorderstatus () {
                const qs = require('qs')
                this.axios({
                    url: '/getorderby_id/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'order_id': this.$route.query.id
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        this.rate = res.data.Rate
                        if (res.data.Rate.isRated === '0' && res.data.Rate.show === '订单完成') {
                            this.ratedialog.custom1.visible = true
                        } else {
                            this.ratedialog.custom1.visible = false
                        }
                        const orderStatus = res.data.order_status
                        const index = {
                            num: 0
                        }
                        if (orderStatus === '订单完成') {
                            this.isEnd = true
                        }
                        for (const i in this.statusList) {
                            if (this.statusList[i].tag === orderStatus.status) {
                                index.num = i
                                this.statusList[i].content = '<span class="timeline-update-time">' + orderStatus.updatatime + '</span>'
                            }
                        }
                        ++index.num
                        for (index.num; index.num < this.statusList.length; index.num++) {
                            this.statusList[index.num].color = 'gray'
                        }
                        for (const i in res.data.result_data) {
                            const tmp = {
                                type: '',
                                Washmethod: '',
                                price: 0,
                                num: 0
                            }
                            tmp.price = res.data.result_data[i].price
                            tmp.type = res.data.result_data[i].type
                            tmp.num = res.data.result_data[i].num
                            if (res.data.result_data[i].Washmethod === 0) {
                                tmp.Washmethod = '普通洗'
                            }
                            if (res.data.result_data[i].Washmethod === 1) {
                                tmp.Washmethod = '超强洗'
                            }
                            this.$set(this.tabledata, i, tmp)
                        }
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '服务器出现故障，请稍后访问',
                            subTitle: '此窗口3秒后关闭',
                            showFooter: false
                        })
                        let num = 3
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                })
            }
        }
    }
</script>

<style scoped>
</style>
